<template>
	<view v-show="types" style="background-color: #ffffff;">
		<view
			style="width: 130px;height: 130px;border: 3px solid #3c77b7;overflow: hidden;margin: 10px auto;border-radius: 10px;">
			<image style="display: block;width: 100%;height: 100%;" :src="uinfo.avatarUrl"></image>
		</view>
		<view class="item1">
			<view class="item2">手机号：{{uinfo.phone}}</view>
			<view class="item2">车队：{{uinfo.cdname}}</view>
			<view class="item2">角色：司机</view>
		</view>
		<view style="height: 80px;width: 80%;margin: 10px auto;overflow: hidden;">
			<view class="itvs" @click="czhi">充值</view>
			<view class="itvs" @click="getcx">查询</view>
		</view>
		<view class="loginout" v-show="uinfo.cdid>0" @click="tctccd">退出车队</view>

		<u-popup :show="czhitype" bgColor="#ffffff" :safeAreaInsetBottom="true" @close="czhitype=false"
			@open="czhitype=true" :closeable="true" :overlay="false" mode="center">
			<view class="ck">
				<view class="item3">洗车次数查询</view>
				<u-row gutter="16" style="margin-top: 20px;">
					<u-col span="4" text-align="center">
						<view class="navlistitem1">车牌:</view>
					</u-col>
					<u-col span="4" text-align="center">
						<view>{{cpxxinfo.char1}}</view>
					</u-col>
					<u-col span="4" text-align="center">
						<view class="seach" @click="getcp">查询</view>
					</u-col>
				</u-row>
				<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addczxz(item)" :class="{'itv1':cur1==item.id}"
						v-for="(item, index) in items" :key="item.id">
						{{item.name}}/{{item.value}}次
					</view>
				</view>
				<u-button type="primary" @click="czxcf" text="充值"></u-button>
				<u-button type="primary" @click="gbczhi" text="关闭"></u-button>
			</view>
		</u-popup>

		<u-popup :show="cxtype" bgColor="#ffffff" :safeAreaInsetBottom="true" @close="cxtype=false" @open="cxtype=true"
			:closeable="true" :overlay="false" mode="center">
			<view class="ck">
				<view class="item3">洗车次数查询</view>
				<u-row gutter="16" style="margin-top: 20px;">
					<u-col span="5" text-align="center">
						<view class="navlistitem1">车牌:</view>
					</u-col>
					<u-col span="4" text-align="center">
						<view v-show="cpxxinfo==''" class="items1" @click="getcp()">点击选择车牌</view>
						<view v-show="cpxxinfo!=''" class="items1" @click="getcp()">{{cpxxinfo.char1}}</view>
					</u-col>
				</u-row>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">所属车队：</view>
					<view class="items1">{{cpxxinfo.char7}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">剩余次数：</view>
					<view class="items1">{{cpxxinfo.xcnum}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">充值时间：</view>
					<view class="items1">{{cpxxinfo.cztimes}}</view>
				</view>
			</view>

		</u-popup>
		<!-- 
		<view v-show="czhitype" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">洗车费充值(微信支付)</view>
			<view class="item4">
				<view>车牌：</view>
				<view style="height: 40px;border-bottom: 3px solid #3c77b7;font-size: 20px;width: 160px;">{{cpxxinfo.char1}}</view>
				<view @click="getcp()" style="background-color: #3c77b7;color: #ffffff;font-weight: 600;border-radius: 10px;font-size: 16px;width: 60px;text-align: center;margin-left: 10px;">查询</view>
			</view>
			<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addczxz(item)" :class="{'itv1':cur1==item.id}"  v-for="(item, index) in items" :key="item.id">
							{{item.name}}/{{item.value}}次
					</view>
			</view>
			
			<view @click="czxcf" class="cz">充值</view>
			<view @click="gbczhi" class="gb">关闭</view>
		</view>
		 -->



		<!-- <view v-show="cxtype" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">洗车次数查询</view>
			<view style="border: 2px solid #3c77b7;width: 80%;height: 160px;margin: 0 auto;margin-top: 10px;margin-bottom: 10px;">
				<view style="height:40px;overflow: hidden;">
					<view class="items1">车牌：</view>
					<view v-show="cpxxinfo==''" class="items1" @click="getcp()">点击选择车牌</view>
					<view v-show="cpxxinfo!=''" class="items1" @click="getcp()">{{cpxxinfo.char1}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">所属车队：</view>
					<view class="items1">{{cpxxinfo.char7}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">剩余次数：</view>
					<view class="items1">{{cpxxinfo.xcnum}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">充值时间：</view>
					<view class="items1">{{cpxxinfo.cztimes}}</view>
				</view>
			</view>
				<view @click="gbcx" class="gb">关闭</view>
		</view>
		 -->
		<u-popup :show="cptypeor" bgColor="#ffffff" :safeAreaInsetBottom="true" @close="cptypeor=false"
			@open="cptypeor=true" :closeable="true" :overlay="false" mode="center">
			<view class="ck">
				<view class="item3">车牌查询</view>
				<u-row gutter="16" style="margin-top: 20px;">
					<u-col span="3" text-align="center">
						<view class="navlistitem1">车牌:</view>
					</u-col>
					<u-col span="6" text-align="center">
						<view><u--input placeholder="请输入内容" border="bottom" clearable v-model="cpnames"></u--input>
						</view>
					</u-col>
					<u-col span="4" text-align="center">
						<view @click="seachcp()" class="seachs">查询</view>
					</u-col>
				</u-row>
				<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addcpxz(item)" :class="{'itv1':cur2==item.id,'itv2':item.blackname==2}"
						v-for="(item, index) in items4" :key="item.id">
						{{item.char1}}
					</view>
				</view>
				<u-button type="primary" @click="qrcp" text="确认选择"></u-button>
			</view>
		</u-popup>
		<!-- <view  v-show="cptypeor" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">车牌查询</view>
			<view class="item4">
				<view>车牌：</view>
				<view><input style="height: 40px;border-bottom: 3px solid #3c77b7;" type="text" v-model="cpnames"/></view>
				<view @click="seachcp()"  style="background-color: #3c77b7;color: #ffffff;font-weight: 600;border-radius: 10px;font-size: 16px;width: 60px;text-align: center;margin-left: 10px;">查询</view>
			</view>
			<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addcpxz(item)" :class="{'itv1':cur2==item.id,'itv2':item.blackname==2}"  v-for="(item, index) in items4" :key="item.id">
							{{item.char1}}
					</view>
			</view>
			
			<view @click="qrcp" class="cz">确认选择</view>
			<view @click="gbcp" class="gb">关闭</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		name: "sj",
		props: {
			types: {
				type: Boolean,
				default: false,
				required: true
			}
		},
		data() {
			return {
				uinfo: '',
				czhitype: false,
				items: [{
						id: 1,
						value: '1',
						name: '5元',

					},
					{
						id: 2,
						value: '4',
						name: '20元'
					},
					{
						id: 3,
						value: '12',
						name: '50元'
					},
					{
						id: 4,
						value: '25',
						name: '100元'
					},
					{
						id: 5,
						value: '50',
						name: '200元'
					},
					{
						id: 6,
						value: '120',
						name: '500元'
					},
				],
				cur1: '',
				cur2: '',
				czxzinfo: '',
				cxtype: false,
				items4: [],
				cpnames: '',
				cptypeor: false,
				cpxxinfo: '',
			};
		},
		created() {
			this.getuserinfo();
		},
		methods: {
			qrcp() {
				this.cptypeor = false

			},
			getcp() {
				this.cptypeor = true
			},
			gbcp() {
				this.cptypeor = false
			},
			addcpxz(e) {
				if (e.blackname == 2) {
					uni.showToast({
						title: '当前车牌是黑名单',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					this.cur2 = e.id
					this.cpxxinfo = e
				}

			},
			getcx() {
				this.cxtype = true
			},
			gbcx() {
				this.cxtype = false
			},
			czhi() {
				this.czhitype = true
			},
			gbczhi() {
				this.czhitype = false
			},
			addczxz(e) {
				this.cur1 = e.id
				this.czxzinfo = e
			},
			async czxcf() {
				let czxzinfo = this.czxzinfo
				let cpxxinfo = this.cpxxinfo
				let that = this
				var jweixin = require('jweixin-module');
				let data = {
					pic: czxzinfo.value * 1 * 5,
					openid: this.uinfo.openid,
					uid: this.uinfo.id
				}
				let res = await this.$api.getpayinfodata(data)
				let data1 = {
					pic: czxzinfo.value * 1 * 5,
					xcnum: czxzinfo.value,
					cpid: cpxxinfo.id,
					cpname: cpxxinfo.char1,
					openid: this.uinfo.openid,
					uid: this.uinfo.id,
					nonceStr: res.data.nonceStr,
					paySign: res.data.paySign,
					timeStamp: res.data.timeStamp,
					package: res.data.package
				}
				// let data1 = {
				//  pic:czxzinfo.value*1*5,
				//  xcnum:czxzinfo.value,
				//  cpid:cpxxinfo.id,
				//  cpname:cpxxinfo.char1,
				//  openid:3213,
				//  uid:32,
				//  nonceStr:32213,
				//  paySign:231321,
				//  timeStamp:312,
				//  package:321
				// }
				jweixin.config({
					debug: false,
					appId: 'wx92f28e9b99acb503', //必填
					jsApiList: ['chooseWXPay']
				});
				jweixin.ready(function() {
					jweixin.chooseWXPay({
						appId: res.data.appId,
						package: res.data.package,
						timestamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							// 支付成功后的回调函数
							uni.request({
								url: 'https://szhwx.ypeport.com/index.php/api/Index/addczjl', //仅为示例，并非真实接口地址。
								data: data1,
								method: "POST",
								header: {
									'Content-Type': 'application/json',
									'Content-Type': 'application/x-www-form-urlencoded',
								},
								success: (res) => {
									if (res.data.code == 0) {
										uni.showToast({
											icon: 'none',
											title: res.data.msg,
											success: function() {
												that.czhitype = false
											}
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.msg,
										});
									}
								}
							});
						},
						cancel: function(r) {},
						fail: function(res) {
							console.log('payfail')
						}
					});
				});
				jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '请到手机支付',
					});
				});
			},

			async getuserinfo() {
				let data = {
					id: uni.getStorageSync('uid'),
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					this.uinfo = res.data.data
					// uni.setStorageSync('uid', res.data.data.id);
					// uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.getcpcdlist();
				}
			},
			//获取当前车队的车牌
			async seachcp() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.uinfo.cdid,
					cpnames: cpnames
				}
				let res = await this.$api.getcpcdlists(data)
				if (res.data.code == 0) {
					this.cptypeor = true
					this.items4 = res.data.data
				}
			},
			async getcpcdlist() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.uinfo.cdid,
				}
				let res = await this.$api.getcpcdlists(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},

			tctccd(e) {
				let that = this
				uni.showModal({
					title: '是否退出车队',
					content: '取消操作',
					success: function(res) {
						if (res.confirm) {
							that.outcd()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//退出车队
			async outcd() {
				let data = {
					uid: this.uinfo.id,
					cdid: this.uinfo.cdid
				}
				let res = await this.$api.outcd(data)
				if (res.data.code == 0) {
					this.getuserinfo()
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.itvs {
		float: left;
		height: 70px;
		width: 48%;
		margin-left: 5px;
		border: 3px solid #3c77b7;
		margin-top: 5px;
		margin-bottom: 5px;
		line-height: 70px;
		text-align: center;
		font-size: 20px;
		background-color: #3c77b7;
		color: #ffffff;
		border-radius: 10px;
	}

	.seachs {
		background-color: #3c77b7;
		color: #ffffff;
		font-weight: 600;
		border-radius: 5px;
		font-size: 16px;
		width: 80px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.loginout {
		border: 3px solid #3c77b7;
		color: #ffffff;
		border-radius: 10px;
		margin: 10px auto;
		font-size: 20px;
		height: 60px;
		line-height: 60px;
		width: 80%;
		background-color: #3c77b7;
		text-align: center;
	}

	.seach {
		height: 40px;
		width: 100px;
		color: #ffffff;
		border-radius: 5px;
		font-size: 20px;
		line-height: 40px;
		text-align: center;
		background-color: #4993dd;
	}

	.item1 {
		border: 3px solid #3c77b7;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 10px;
		width: 80%;
	}

	.item2 {
		height: 50px;
		padding-left: 10px;
		line-height: 50px;
		font-size: 20px;
	}

	.ck {
		background-color: #efefef;
		width: 400px;
		height: 400px;
	}

	.item3 {
		margin-top: 5px;
		background-color: #3c77b7;
		color: #ffffff;
		font-size: 20px;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.item4 {
		height: 50px;
		overflow: hidden;
	}

	.item4 view {
		height: 40px;
		line-height: 40px;
		float: left;
		font-size: 20px;
		padding-left: 5px;
		margin-top: 5px;
	}

	.item5 {}

	.item6 {
		border: 3px solid #3c77b7;
		height: 50px;
		width: 46%;
		margin-left: 5px;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		float: left;
		border-radius: 10px;
		margin-top: 10px;
	}

	.itv1 {
		background-color: #3c77b7;
		color: #ffffff;
	}

	.cz {
		background-color: #3c77b7;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;
	}

	.gb {
		background-color: red;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;

	}

	.items1 {
		height: 40px;
		line-height: 40px;
		border: 1px solid #3c77b7;
		float: left;
		width: 50%;
		text-align: center;
		font-size: 20px;
	}

	.itv1 {
		background-color: #3c77b7;
		color: #ffffff;
	}

	.itv2 {
		background-color: #000102;
		color: #ffffff;
	}
</style>